<template>
    <van-row>
        <div class="tip-btn" @click="showmenu">
            <img :src="!takeshow?menubtn:menubtn2" alt="">
        </div>

        <div :class="['tip-btn-child-1',takeshow1]" @click="Jumpto('/indexs')">
            <img class="child-img" src="../assets/img/index-home.png" alt="">
        </div>
        <div :class="['tip-btn-child-2',takeshow2]" @click="Jumpto('/goodlist')">
            <img class="child-img" src="../assets/img/index-package.png" alt="">
        </div>
        <div :class="['tip-btn-child-3',takeshow3]" @click="Jumpto('/shopcart')">
            <img class="child-img" src="../assets/img/index-bag.png" alt="">
        </div>
        <div :class="['tip-btn-child-4',takeshow4]" @click="Jumpto('/own')">
            <img class="child-img" src="../assets/img/index-user.png" alt="">
        </div>
    </van-row>
</template>
<script>
export default {
    data(){
        return{
            menubtn:require("../assets/img/index-menu.png"),
            menubtn2:require("../assets/img/index-close.png"),
            takeshow:false,
            takeshow1:"",
            takeshow2:"",
            takeshow3:"",
            takeshow4:"",
            timeInterval:"",
            closetag:""
        }
    },
    computed:{
        getcollapsed(){
            return this.$store.state.HomePage.collapsed
        }
    },
    watch:{
        getcollapsed(val){
            let _this=this
            this.takeshow=false
            clearInterval(_this.timeInterval)
        }
    },
    mounted(){

    },
    activated(){
        let _this=this
        _this.takeshow=false
        _this.takeshow1=""
        _this.takeshow2=""
        _this.takeshow3=""
        _this.takeshow4=""
    },
    methods:{
        Jumpto(key){
            this.$router.push(key)
        },
        showmenu(){
            let _this=this
            if(!_this.takeshow){
                _this.takeshow1="hasOpen1"
                _this.takeshow2="hasOpen2"
                _this.takeshow3="hasOpen3"
                _this.takeshow4="hasOpen4"
                _this.takeshow=true
                _this.timeInterval=setInterval(()=>{
                    _this.takeshow1="hasClose1"
                    _this.takeshow2="hasClose2"
                    _this.takeshow3="hasClose3"
                    _this.takeshow4="hasClose4"
                    _this.takeshow=false
                    clearInterval(_this.timeInterval)
                },5000)
            }else{
                _this.takeshow1="hasClose1"
                _this.takeshow2="hasClose2"
                _this.takeshow3="hasClose3"
                _this.takeshow4="hasClose4"
                _this.takeshow=false
                clearInterval(_this.timeInterval)
            }
        }
    }
}
</script>
<style scoped>
.tip-btn{
    position: fixed !important;
    bottom: 53px;
    left: 17px;
    width: 50px;
    height: 50px;
    z-index: 10;
}
.tip-btn>img{
    width: 50px;
    height: 50px;
    display: block;
    margin: 7px auto;
}

@keyframes child1open {
    from{ left: 17px; opacity: 0;}
    to{ left: 73px; opacity: 1;}
}
@keyframes child1close {
    from{ left: 73px; opacity: 1;}
    to{ left: 17px; opacity: 0;}
}
.hasOpen1{
	animation:child1open ease 1s forwards ;
	-moz-animation:child1open ease 1s forwards ; /* Firefox */
	-webkit-animation:child1open ease 1s forwards ; /* Safari and Chrome */
	-o-animation:child1open ease 1s forwards ; /* Opera */
}
.hasClose1{
	animation:child1close ease 1s forwards ;
	-moz-animation:child1close ease 1s forwards ; /* Firefox */
	-webkit-animation:child1close ease 1s forwards ; /* Safari and Chrome */
	-o-animation:child1close ease 1s forwards ; /* Opera */
}

@keyframes child2open {
    from{ left: 17px; opacity: 0;}
    to{ left: 129px; opacity: 1;}
}
@keyframes child2close {
    from{ left: 129px; opacity: 1;}
    to{ left: 17px; opacity: 0;}
}
.hasOpen2{
	animation:child2open ease 1s forwards ;
	-moz-animation:child2open ease 1s forwards ; /* Firefox */
	-webkit-animation:child2open ease 1s forwards ; /* Safari and Chrome */
	-o-animation:child2open ease 1s forwards ; /* Opera */
}
.hasClose2{
	animation:child2close ease 1s forwards ;
	-moz-animation:child2close ease 1s forwards ; /* Firefox */
	-webkit-animation:child2close ease 1s forwards ; /* Safari and Chrome */
	-o-animation:child2close ease 1s forwards ; /* Opera */
}


@keyframes child3open {
    from{ left: 17px; opacity: 0;}
    to{ left: 185px; opacity: 1;}
}
@keyframes child3close {
    from{ left: 185px; opacity: 1;}
    to{ left: 17px; opacity: 0;}
}
.hasOpen3{
	animation:child3open ease 1s forwards ;
	-moz-animation:child3open ease 1s forwards ; /* Firefox */
	-webkit-animation:child3open ease 1s forwards ; /* Safari and Chrome */
	-o-animation:child3open ease 1s forwards ; /* Opera */
}
.hasClose3{
	animation:child3close ease 1s forwards ;
	-moz-animation:child3close ease 1s forwards ; /* Firefox */
	-webkit-animation:child3close ease 1s forwards ; /* Safari and Chrome */
	-o-animation:child3close ease 1s forwards ; /* Opera */
}


@keyframes child4open {
    from{ left: 17px; opacity: 0;}
    to{ left: 241px; opacity: 1;}
}
@keyframes child4close {
    from{ left: 241px; opacity: 1;}
    to{ left: 17px; opacity: 0;}
}
.hasOpen4{
	animation:child4open ease 1s forwards ;
	-moz-animation:child4open ease 1s forwards ; /* Firefox */
	-webkit-animation:child4open ease 1s forwards ; /* Safari and Chrome */
	-o-animation:child4open ease 1s forwards ; /* Opera */
}
.hasClose4{
	animation:child4close ease 1s forwards ;
	-moz-animation:child4close ease 1s forwards ; /* Firefox */
	-webkit-animation:child4close ease 1s forwards ; /* Safari and Chrome */
	-o-animation:child4close ease 1s forwards ; /* Opera */
}


.child-img{
    width: 50px;
    height: 50px;
    display: block;
    margin: 7px auto;
}
.tip-btn-child-1{
    position: fixed !important;
    bottom: 53px;
    /* left: 73px; */
    left: 0;
    width: 50px;
    height: 50px;
    display: block;
    z-index: 9;
    opacity: 0;
}
.tip-btn-child-2{
    position: fixed !important;
    bottom: 53px;
    /* left: 129px; */
    left: 0;
    width: 50px;
    height: 50px;
    display: block;
    z-index: 8;
    opacity: 0;
}
.tip-btn-child-3{
    position: fixed !important;
    bottom: 53px;
    /* left: 185px; */
    left: 0;
    width: 50px;
    height: 50px;
    display: block;
    z-index: 7;
    opacity: 0;
}
.tip-btn-child-4{
    position: fixed !important;
    bottom: 53px;
    /* left: 241px; */
    left: 0;
    width: 50px;
    height: 50px;
    display: block;
    z-index: 6;
    opacity: 0;
}
</style>